<template>
  <div style="padding: 20px">
    <div class="opt-area-02">
      <div class="left-con">
        <div class="input-frame" style="width: 164px">
          <Input type="text" placeholder="请输入身份证号" style="width: 164px" v-model="params.cardno"
                 icon="ios-search"/>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select placeholder="请选择宣传情况" v-model="params.is_xc" style="width:164px">
            <Option value="" >全部</Option>
            <Option value="是" >是</Option>
            <Option value="否" >否</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select placeholder="请选择宣传结果" v-model="params.result_type" style="width:164px">
            <Option value="1" >认同</Option>
            <Option value="2" >基本认同</Option>
            <Option value="3" >不认同</Option>
            <Option value="4" >死亡</Option>
          </Select>
        </div>
        <Button type="success" size="small" @click="selectList()" style="margin-top: 5px;margin-right:5px">搜索</Button>
        <Button :loading="dcLoading" type="info" size="small" @click="dcExcel" style="margin-top: 5px;margin-right:5px">导出</Button>      </div>
      <div class="left-con" style="margin-top: 5px">
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择小区" v-model="params.residential_id" style="width:164px" clearable @on-change="newFindGridChildrenList('5.5',params.residential_id)" @on-clear="clearGrid(5.5)">
            <Option v-for="item in residentialList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择网格" v-model="params.garden_id" style="width:164px" clearable @on-change="newFindGridChildrenList('6',params.garden_id)" @on-clear="clearGrid(6)">
            <Option v-for="item in GridGradenList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择楼" v-model="params.building_id" style="width:164px" clearable @on-change="newFindGridChildrenList('7',params.building_id)" @on-clear="clearGrid(7)">
            <Option v-for="item in GridBuildingList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择单元" v-model="params.unit_id" style="width:164px" clearable @on-change="newFindGridChildrenList('8',params.unit_id)" @on-clear="clearGrid(8)">
            <Option v-for="item in GridUnitList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择层" v-model="params.floor_id" style="width:164px" clearable @on-change="findGridDoorplateList(params.floor_id)" @on-clear="clearGrid(9)">
            <Option v-for="item in GridFloorList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade === '5'">
          <Select placeholder="请选择户" v-model="params.doorplate_id" style="width:164px" clearable @on-clear="clearGrid(10)">
            <Option v-for="item in GridDoorplateList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
      </div>
    </div>
  <Table border :columns="tableColumns" :data="tableData" :loading="tableLoading">
    <template slot-scope="{ row, index }" slot="is_xc">
      <span v-if="row.result_type === undefined || row.result_type === ''  || row.result_type === null">否</span>
      <span v-else>是</span>
    </template>
    <template slot-scope="{ row, index }" slot="result_type">
      <span v-if="row.result_type === '1'">认同</span>
      <span v-if="row.result_type === '2'">基本认同</span>
      <span v-if="row.result_type === '3'">不认同</span>
      <span v-if="row.result_type === '4'">死亡</span>
    </template>
    <template slot-scope="{ row, index }" slot="action">
      <Button type="primary" size="small" style="margin-right: 5px" @click="clickUpdate(row)">编辑</Button>
    </template>
  </Table>
  <Row type="flex" justify="end" class="page_style">
    <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
          @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  </Row>
    <Modal
        v-model="modal"
        title="意见反馈"
        @on-ok="clickConfirm">
      <Select placeholder="请选择反馈结果" v-model="resultInfo.result_type">
        <Option value="1" >认同</Option>
        <Option value="2" >基本认同</Option>
        <Option value="3" >不认同</Option>
        <Option value="4" >死亡</Option>
      </Select>
      <Input style="margin-top: 10px" v-model="resultInfo.remark" maxlength="100" show-word-limit type="textarea" placeholder="请输入备注" />
    </Modal>
</div>
</template>
<script>
import { findFloorXJList, findYBLabelPeopleList, findYBPeopleList, updateYBFKResult } from '../../api/eventlist'
import { newFindGridChildrenList } from '../../api/z-new-grid'

export default {
  name: 'index',
  data () {
    return {

      residentialList: [],
      GridGradenList: [],
      GridBuildingList: [],
      GridUnitList: [],
      GridFloorList: [],
      GridDoorplateList: [],
      resultInfo: {},
      modal: false,
      severUserInfo: {},
      tableLoading: false,
      dcLoading: false,
      tableColumns: [
        {
          title: '姓名',
          key: 'name',
          align: 'center',
          width: 100
        },
        {
          title: '身份证号',
          key: 'cardno',
          align: 'center',
          width: 180
        },
        {
          title: '联系方式',
          key: 'mobile',
          align: 'center',
          width: 150
        },
        {
          title: '是否宣传',
          slot: 'is_xc',
          align: 'center',
          width: 50
        },
        {
          title: '宣传结果',
          slot: 'result_type',
          align: 'center',
          width: 100
        },
        {
          title: '小区',
          key: 'residential_name',
          align: 'center',
          width: 150
        },
        {
          title: '网格',
          key: 'garden_name',
          align: 'center',
          width: 150
        },
        {
          title: '楼',
          key: 'building_name',
          align: 'center',
          width: 150
        },
        {
          title: '单元',
          key: 'unit_name',
          align: 'center',
          width: 100
        },
        {
          title: '层',
          key: 'floor_name',
          align: 'center',
          width: 50
        },
        {
          title: '户',
          key: 'doorplate_name',
          align: 'center',
          width: 50
        },
        {
          title: '区',
          key: 'area_name',
          align: 'center',
          width: 100
        },
        {
          title: '街道',
          key: 'street_name',
          align: 'center',
          width: 100
        },
        {
          title: '社区',
          key: 'community_name',
          align: 'center',
          width: 150
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center',
          fixed: 'right'
        }
      ],
      tableData: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    clickConfirm () {
      let data = {
        id: this.resultInfo.peopleInfo.id,
        result_type: this.resultInfo.result_type,
        remark: this.resultInfo.remark
      }
      updateYBFKResult(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '保存成功', desc: ret.data.errmsg })
        }
      })
    },
    init () {
      this.tableLoading = true
      findYBLabelPeopleList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.tableLoading = false
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    selectList () {
      this.params.pageNo = 1
      this.init()
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    clickUpdate (item) {
      this.resultInfo.result_type = ''
      this.resultInfo.remark = ''
      this.resultInfo.peopleInfo = item
      if (item.result_type) {
        this.resultInfo.result_type = item.result_type
      }
      if (item.remark) {
        this.resultInfo.remark = item.remark
      }
      this.modal = true
    },
    dcExcel () {
      this.dcLoading = true
      findYBPeopleList().then(ret => {
        if (ret.data.errcode === 0) {
          window.open(ret.data.data)
          this.dcLoading = false
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    newFindGridChildrenList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      newFindGridChildrenList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === '5') {
            this.residentialList = ret.data.data
          }
          if (e1 === '5.5') {
            this.GridGradenList = ret.data.data
          }
          if (e1 === '6') {
            this.GridBuildingList = ret.data.data
          }
          if (e1 === '7') {
            this.GridUnitList = ret.data.data
          }
          if (e1 === '8') {
            this.GridFloorList = ret.data.data
          }
          if (e1 === '9') {
            this.GridDoorplateList = ret.data.data
          }
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    clearGrid (e) {
      if (e === 5.5) {
        this.params.residential_id = ''
        this.params.garden_id = ''
        this.params.building_id = ''
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      }
      if (e === 6) {
        this.params.garden_id = ''
        this.params.building_id = ''
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 7) {
        this.params.building_id = ''
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 8) {
        this.params.unit_id = ''
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 9) {
        this.params.floor_id = ''
        this.params.doorplate_id = ''
      } else if (e === 10) {
        this.params.doorplate_id = ''
      }
    },
    findGridDoorplateList (e) {
      let data = {
        floor_id: e
      }
      findFloorXJList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.GridDoorplateList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
    this.newFindGridChildrenList('5', this.severUserInfo.company_id)
  }
}
</script>
<style scoped>
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}
.page_style {
  margin: 20px 5px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

</style>
